<template>
  <div>
<table>
  <tr>
    <td>手机号</td>
    <td><input type="text" v-model="loginData.phone"></td>
  </tr>
  <tr>
    <td>密码</td>
    <td><input type="password" v-model="loginData.pwd"></td>
  </tr>
  <tr>
    <td>确认密码</td>
    <td><input type="password" v-model="loginData.qpwd"></td>
  </tr>
  <tr>
    <td></td>
    <td><input type="button" value="注册" @click="login"></td>
  </tr>
</table>
  </div>
</template>

<script setup lang="ts">
import {reactive,toRefs} from 'vue'
import {useRouter} from 'vue-router'
const router=useRouter()

const data=reactive({
  loginData:{
    phone:'',
    pwd:'',
    qpwd:''
  }
})

let {loginData} =toRefs(data)

const login=()=>{
  if(loginData.value.phone==''){
    alert("手机号不能为空")
    return
  }
  if(loginData.value.pwd==''){
    alert("密码不能为空")
    return
  }
  if(loginData.value.qpwd==''){
    alert("确认密码不能为空")
    return
  }
  if(loginData.value.phone.length!=11){
    alert("手机号的长度只能是11位")
    return
  }
  if(loginData.value.pwd!=loginData.value.qpwd){
    alert("密码和确认密码这两个信息必须一致")
    return
  }
  if(loginData.value.phone=='13512349876'&&loginData.value.pwd=='123456'){
    alert("注册成功")
    router.push({
      path:'/login',
      query:{
        phone:loginData.value.phone
      }
    })
    alert(loginData.value.phone)
  }else{
    alert("注册失败")
  }
}

</script>

<style scoped>

</style>